<script setup>
import { ref ,onMounted, reactive} from 'vue'
// store
import useListStore from '../../store/list.js'
// 头部组件
import AuditHeader from '../../components/header/AuditHeader.vue'
// 搜索组件
import ListSearch from '../../components/list/search/ListSearch.vue'
// 列表组件
import UserTable from '../../components/list/table/UserTable.vue'
// 头部
const text = ref('审核平台-列表页')

// 组件一挂载便获取数据
const listStore = useListStore()
const initData = () => {
  listStore.getUserList()
}
onMounted(() => {
  initData()
})

let searchData = reactive({
  username: '',
  product: '',
  industry: '',
  startDate: '',
  endDate: ''
})

const search = (data) => {
  searchData.username = data.username,
  searchData.product = data.product
  searchData.industry = data.industry
  searchData.startDate = data.startDate
  searchData.endDate = data.endDate
}

</script>

<template>
  <AuditHeader :text="text"></AuditHeader>
  <div class="main">
    <div class="main-input">
      <ListSearch @search="search"></ListSearch>
    </div>
    <div class="main-table">
      <UserTable :searchData="searchData"></UserTable>
    </div>
  </div>
</template>

<style lang="less" scoped>

.main {
  height: 85vh;

  .main-input {
    height: 15vh;
    width: 100%;
  }

  .main-table {
    height: 70vh; 
    margin-top: 5px;
    width: 100%;  
  }
}
</style>
